<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <script>
    
function login()
{
//前端需要用 window.webkit.messageHandlers.注册的方法名.postMessage({body:传输的数据} 来给native发送消息
    var name = document.getElementById("userName").value;
    var pwd = document.getElementById("userPwd").value;
    window.webkit.messageHandlers.loginAction.postMessage({userName: name,userPwd:pwd});
}

function closePage(){
    window.webkit.messageHandlers.closeCurrPage.postMessage({});
}

function testAlert(){    
    alert("网页显示的Alert信息(这是网页写的内容)");    
}

function testConfirm(){
     confirm("是否需要判断信息呢?(这是网页写的内容)");
}

function testPromt(){
     prompt("请在下面输入您的姓名","默认的输入文本");
}


</script>
</head>
    <body>
        <h1 style="text-align:Center">登录Demo</h1>
        
        <div style="font-size:24">用户名：<input id="userName" style="width=300;height:60" type="text" placeholder="请输入用户名" /></div>
        <br />
        <div style="font-size:24">密&nbsp;&nbsp;&nbsp;码：<input id="userPwd" style="width=300;height:60" type="password" placeholder="请输入用户密码" /></div>
        <br /><br /><br />
        <button onclick="login()" style="text-align:Center;width:250;height:50;margin-left:30;font-size:36">登录</button>
        
        <br /><br />
        <button onclick="closePage()" style="text-align:Center;width:250;height:50;margin-left:30;font-size:36">closePage</button>
        
        <br /><br />
        <div style='flaot:left;'>
        <button onclick="testAlert()" style="width:90;height:20;margin-left:5;font-size:12">测试Alert</button>
        <button onclick="testConfirm()" style="width:100;height:20;margin-left:5;font-size:12">测试Confirm</button>
        <button onclick="testPromt()" style="width:90;height:20;margin-left:5;font-size:12">测试Promt</button>
        </div>
    </body>

</html>